<template>
  <tab-bar>
    <tab-bar-item path="/index/home">
      <template v-slot:item-img><img src="@/assets/images/tabbar/home.png" alt=""></template>
      <template v-slot:item-img-active><img src="@/assets/images/tabbar/home_active.png" alt=""></template>
      <template v-slot:item-text><div>首页</div></template>
    </tab-bar-item>
    <tab-bar-item path="/index/explore">
      <template v-slot:item-img><img src="@/assets/images/tabbar/explore.png" alt=""></template>
      <template v-slot:item-img-active><img src="@/assets/images/tabbar/explore_active.png" alt=""></template>
      <template v-slot:item-text><div>发现</div></template>
    </tab-bar-item>
    <tab-bar-item path="/index/notification">
      <template v-slot:item-img><img src="@/assets/images/tabbar/notification.png" alt=""></template>
      <template v-slot:item-img-active><img src="@/assets/images/tabbar/notification_active.png" alt=""></template>
      <template v-slot:item-text><div>消息</div></template>
    </tab-bar-item>
    <tab-bar-item path="/index/profileIndex">
      <template v-slot:item-img><img src="@/assets/images/tabbar/profile.png" alt=""></template>
      <template v-slot:item-img-active><img src="@/assets/images/tabbar/profile_active.png" alt=""></template>
      <template v-slot:item-text><div>我的</div></template>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
  import TabBar from "./TabBar";
  import TabBarItem from "./TabBarItem";

  export default {
    name: "MainTabBar",
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

<style scoped>

</style>
